<template>
<div class="w">
	<div class="form-title">填写基本信息（带*字段为必填项）</div>
	<div class="form-titlex">
		您填写的信息会出现在打印证件上，主办方不会以任何形式泄露您的个人信息。<br/>
		根据国家疫情防控相关规定，所有进入展览场馆的人员需实名登记身份信息，因此请您填写准确的个人身份信息，确保防疫管理部门健康信息追溯
	</div>
	<div class="form-data">
		<el-form :model="formData" size="medium" :rules="formRules" ref="dataForm" label-width="120px">
      <el-form-item label="姓名："  prop="realName">
        <el-input v-model.trim="formData.realName" style=" width:500px;" placeholder="请输入姓名"></el-input>
      </el-form-item>				
      <el-form-item label="证件类型：" prop="cartType">
        <el-select v-model="formData.cartType" placeholder="请选择证件类型" style=" width:500px;">
          <el-option v-for="item in card" :key="item.cardTypeCode" :label="item.cardTypeName" :value="item.cardTypeCode"></el-option>
        </el-select>
      </el-form-item>
			<el-form-item label="证件号码：" prop="cartCode">
				<el-input v-model.trim="formData.cartCode" @input="changeCartCode" style=" width:500px;" placeholder="请输入证件号码"></el-input>
			</el-form-item>	
			<el-form-item label="生日："  v-mask="'####-##-##'" prop="birthday">
				<el-input v-model.trim="formData.birthday" style=" width:500px;" placeholder="请输入生日"></el-input>
			</el-form-item>	
			<el-form-item label="单位名称：" prop="companyName">
				<el-input v-model.trim="formData.companyName" style=" width:500px;" placeholder="请输入单位名称"></el-input>
			</el-form-item>
			<el-form-item label="部门名称：" prop="deptName">
				<el-input v-model.trim="formData.deptName"  style="width:500px;" placeholder="请输入部门名称"></el-input>
			</el-form-item>				
			<el-form-item label="职位：" prop="job">
        <el-select v-model="formData.job" placeholder="请选择职位" style=" width:500px;">
          <el-option v-for="(item,index) in jobs" :key="index" :label="item" :value="index"></el-option>
        </el-select>			
			</el-form-item>
			<el-form-item label="邮箱：" prop="email">
				<el-input v-model="formData.email" style="width:500px;" placeholder="请输入邮箱地址"></el-input>
			</el-form-item>				
			<el-form-item label="所在地区：" :class="{'has-country': formData.country}">
				<el-cascader :props="props" @change="selectArea" style="width:500px;" :placeholder="areaStr"></el-cascader>			
			</el-form-item>
			<el-form-item label="详细地址：" prop="address">
				<el-input v-model.trim="formData.address" style="width:500px;" placeholder="请输入详细地址"></el-input>
			</el-form-item>
			<el-form-item label=" ">
				<el-button type="primary" @click="goToSave(false)" :loading="btnLoad" style=" width:160px;">保存</el-button> 
				<el-button v-if="btnType === true"  type="primary" @click="goToNext"  style=" width:160px;">查看结果</el-button> 
				<el-button v-if="btnType === false"  type="primary" @click="goToNext"  style=" width:160px;">下一步</el-button> 
			</el-form-item>																									
		</el-form>
	</div>
</div>
</template>
<script>
import {mask} from 'vue-the-mask'
import config from "@/config";
export default {
  directives: {mask},	
  data() {
		var _this = this;
    return {
			formData:{
				realName:'',
				cartType:'',
				cartCode:'',
				birthday:'',
				sex:'',
				companyName:'',
				deptName:'',
				job:'',
				email:'',
				country:'',
				province:'',
				city:'',
				region:'',
				address:'',
				token:'',
				sessionId:'',
				customerUuid:''
			},
			jobs:['董事长/董事/总裁/总经理/院长/校长/政府高级官员','事业部/部门负责人/总监','经理','普通职员','科研人员(研究员，工程师等)','科室主任/处长/科长','医务人员','主管','教师/教练','学生'],
			areaStr:'',
			formRules:{
				realName: [{ required: true, message: "请选择姓名!", trigger: "change"}],
				cartType: [{ required: true, message: "请选择证件类型!", trigger: "change"}],
				cartCode: [{ required: true, message: "请输入证件号码!", trigger: "change"}],
				birthday: [{ required: true, message: "请输入生日!", trigger: "change"}],
				companyName: [{ required: true, message: "请输入部门名称!", trigger: "change"}],
				deptName: [{ required: true, message: "请输入部门名称!", trigger: "change"}],
				job: [{ required: true, message: "请选择职位!", trigger: "change"}],
				email: [
					{ required: true, message: "请输入邮箱地址!", trigger: "blur"},
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
				],
				address: [{ required: true, message: "请输入详细地址!", trigger: "change"}],
			},
			btnLoad:false,
			card:[],
			props:{							
				lazy: true,
				async lazyLoad (node, resolve)  {
					const { level } = node;
					if(level == 0){	
						var _countryParam = config.setFormData('selectCountry',_this.map)
						var _country = await _this.$http.post(config.appCall,_countryParam);	
						var _nodes = _country.data.countryList.map(item =>{
							item.label = item.countryName;
							item.value = item.countryCode;
							item.leaf = item.countryCode == '100000000' || item.countryCode == '100000004' ? false : true;
							return item; 
						})				
						resolve(_nodes);							
					}else if(level == 1){
						var _countryCode = node.data.value;
						var _map = {..._this.map};
						_map.countryCode = _countryCode;
						var _provinceParam = config.setFormData('selectProvince',_map);
						var _province = await _this.$http.post(config.appCall,_provinceParam);
						var _nodes = _province.data.provinceList.map(item =>{
							item.label = item.areaName;
							item.value = item.areaCode;
							item.leaf = _countryCode == '100000004'?true:false;
							return item 
						})
						resolve(_nodes);	
					}else if(level == 2){
						var _provinceCode = node.data.value;
						var _map = {..._this.map};
						_map.provinceCode = _provinceCode;
						var _cityParam = config.setFormData('selectCity',_map);
						var _city = await _this.$http.post(config.appCall,_cityParam);
						var _nodes = _city.data.cityList.map(item =>{
							item.label = item.cityName;
							item.value = item.areaCode;
							item.leaf = item.leaf;
							return item 
						})
						resolve(_nodes);							
					}else if(level == 3){
						var _cityCode = node.data.value;
						var _map = {..._this.map};
						_map.cityCode = _cityCode;
						var _regionParam = config.setFormData('selectRegion',_map);
						var _region = await _this.$http.post(config.appCall,_regionParam);
						var _nodes = _region.data.regionList.map(item =>{
							item.label = item.areaName;
							item.value = item.areaCode;
							item.leaf = true;
							return item 
						})
						resolve(_nodes);						
					}
				}
			},
			btnType:''
    };
  },
	mounted() {
		this.id = this.$route.query.id ? this.$route.query.id : '';	
		this.map = {
			token : config.userInfo.token,
			sessionId : config.userInfo.sessionId,
			customerUuid : config.userInfo.customer.uuid			
		};
		this.setFormData();
		this.setBtn();
	},
	methods: {
		async setBtn(){
			var _map = {...this.map};
			_map.exhibitionUuid = this.id;
			var param = config.setFormData('checkHasJoinExhibition',_map)
			var res = await this.$http.post(config.appCall,param);
			if(res.data.hasJoin){
				this.btnType = true;
			}else{
				this.btnType = false;
			}
		},
		async setFormData(){
			var param = config.setFormData('getSelectCardTypeList',this.map)
			var _card = await this.$http.post(config.appCall,param);
			this.card = _card.data.data;
			var paramInfo = config.setFormData('getCustomerInfo',this.map)
			var _res = await this.$http.post(config.appCall,paramInfo);
			var _info = _res.data.data && _res.data.data.customerInfoDTO ? _res.data.data.customerInfoDTO : '';
			if(_info.countryName){
				this.areaStr = _info.countryName+_info.provinceName+_info.cityName+_info.regionName
			}else{
				this.areaStr = '请选择地址'
			}
			if(_info.realName){
				this.formData = {
					realName:_info.realName,
					cartType:_info.cartType,
					cartCode:_info.cartCode,
					birthday:_info.birthday,
					sex:_info.sex,
					companyName:_info.companyName,
					deptName:_info.deptName,
					job:_info.job,
					email:_res.data.data.customerDTO.email,
					country:_info.country,
					province:_info.province,
					city:_info.city,
					region:_info.region,
					address:_info.address,
					token:config.userInfo.token,
					sessionId:config.userInfo.sessionId,
					customerUuid:config.userInfo.customer.uuid			
				};
			}
		},
		changeCartCode(){
			if(this.formData.cartType == 1 && this.formData.cartCode.length == 18){
				this.formData.birthday = this.formData.cartCode.substr(6,4)+'-'+this.formData.cartCode.substr(10,2)+'-'+this.formData.cartCode.substr(12,2);
			};
			if(this.formData.cartType == 1 && this.formData.cartCode.length == 17){
				var _sex = this.formData.cartCode.substr(16,1);
				if(_sex % 2 == 1){
					this.formData.sex = 1;	
				}else{
					this.formData.sex = 2;	
				}
			}
		},
		selectArea(value){
			this.formData.country = value[0] ? value[0] : '',
			this.formData.province = value[1] ? value[1] : '',
			this.formData.city = value[2] ? value[2] : '',
			this.formData.region = value[3] ? value[3] : ''
		},
		goToNext(){
			if(this.btnType){
				//已报名
				this.$emit('input', 3)
				this.$router.replace({path: 'index', query: {'id': this.id,'tab':3}});	
			}else{
				this.goToSave(true);
			}	
		},
		goToSave(_type){
			this.$refs["dataForm"].validate(async valid => {
				if(!valid) return;
				this.btnLoad = true;
				var _formdata = {...this.formData};
				_formdata.job = typeof(_formdata.job) == 'number' ? this.jobs[_formdata.job] : _formdata.job;
				var param = config.setFormData('updateCustomerInfo',_formdata)
				var res = await this.$http.post(config.appCall,param);
				this.btnLoad = false;
				if(res.data && res.data.return_code == '0'){
					if(_type){
						this.$emit('input', 2)
						this.$router.replace({path: 'index', query: {'id': this.id,'tab':2}});						
					}else{
						this.$message.success('信息保存成功！');
					}
					//this.$emit('input', 2)
					//window.scrollTo({top:100})
				}else{
					this.$message.error(res.data.message);	
				}
			})
		},
	}
}
</script>
<style scoped>
.form-data{ width:700px; margin:0 auto;}
.form-title{ font-size:16px; font-weight:bold; border-left:4px solid #A5E2DC; width:620px; padding-left:10px; margin:35px auto 10px; }
.form-titlex{ font-size:12px; width:820px; color:#F56C6C; line-height:1.8; margin:0 0 20px 230px;}
.has-country >>> input::-webkit-input-placeholder {color: #606266;}
</style>
